import React from 'react';
import { Link, withRouter } from 'react-router-dom';

import './index.scss'

import { Menu, Icon, Switch, Button, Sider } from 'antd';
const { SubMenu } = Menu;


import MenuApi from '@src/service/MenuApi'
import { onError } from 'mobx-react';

class Home extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            menuMap: {

            },
            menuTree: [{
                id: "100",
                name: '预期示例',
                icon: 'desktop',
                children: [{
                    id: "100_1",
                    name: '列表',
                    children: [],
                    path: '/list'
                }, {
                    id: "100_2",
                    name: '树表格',
                    children: [],
                    path: '/listTree'
                }, {
                    id: "100_3",
                    name: '树渲染(直接)',
                    children: [],
                    path: '/listTree2'
                }, {
                    id: "100_4",
                    name: '树渲染(非直接)',
                    children: [],
                    path: '/listTree3'
                }]
            }],

            mode: 'vertical',
            theme: 'light',
            collapsed: false,
            current: 'mail',
        };
    }

    componentDidMount() {
        var map = {};
        this.TreeToMap(this.state.menuTree, map)
        console.log(map, "=========map==========")

        this.setState({
            menuMap: map
        })
    }

    TreeToMap(arr, map) {
        arr.forEach(item => {
            map[item.id] = item;
            if (item['children'] && item['children'].length > 0) {
                this.TreeToMap(item['children'], map);
            }
        });
    }



    handleClick = e => {
        console.log('click ', e);
        this.setState({
            current: e.key,
        });
    };

    toggleCollapsed = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };


    changeMode = value => {
        this.setState({
            mode: value ? 'vertical' : 'inline',
        });
    };

    changeTheme = value => {
        this.setState({
            theme: value ? 'dark' : 'light',
        });
    };



    handleClick() {
        alert(3);
    }

    MenuItemClick = ({ item, key, keyPath, selectedKeys, domEvent }) => {
        console.log(item, "==========item========");
        console.log(key, "==========key========");
        console.log(keyPath, "==========keyPath========");
        console.log(selectedKeys, "==========selectedKeys========");

        var menu = this.state.menuMap[key];

        if (menu) {
            if (menu['path'] && menu['path'].length > 0) {
                this.props.history.push(menu.path);
            }
        }



    }

    TreeRender(arr) {
        var that = this;
        return arr.map(item => {
            if (item.children.length > 0) {
                return <SubMenu key={item.id}
                    title={
                        <span>
                            <Icon type={item.icon} />
                            <span>{item.name}</span>
                        </span>
                    }>
                    {that.TreeRender(item.children)}
                </SubMenu>

            } else {
                return <Menu.Item key={item.id}>
                    <span>{item.name}</span>
                </Menu.Item>
            }
        })
    }

    render() {
        var layout_side_width = this.state.collapsed ? 80 : 200;
        return (
            <div className="HomePage layout page_container">
                <div className="layout-body">
                    <div className="layout-side" style={{ width: layout_side_width + 'px' }}>
                        <Menu
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            theme="dark"
                            onClick={this.MenuItemClick}
                            mode="inline"
                            inlineCollapsed={this.state.collapsed}
                        >
                            {
                                this.TreeRender(this.state.menuTree)
                            }

                        </Menu>
                        <div className="toggle_block_btn" style={{ width: layout_side_width + 'px' }} onClick={this.toggleCollapsed} >
                            <Icon type={this.state.collapsed ? 'right' : 'left'}></Icon>
                        </div>
                    </div>
                    <div className="layout-main">
                        {
                            this.props.children
                        }
                    </div>

                </div>
            </div>
        );
    }
}

export default withRouter(Home);